import {
  type Component,
  createMemo,
  mergeProps,
  type ParentComponent,
  Show,
  splitProps,
} from "solid-js";
import type { SpinnerProps } from "./types";
import { wrapClasses } from "@lib/types";

const defaultProps: Partial<SpinnerProps> = {
  variant: "border",
};

const Spinner: ParentComponent<SpinnerProps> = (p) => {
  const [local, props] = splitProps(mergeProps(defaultProps, p), [
    "variant",
    "sm",
    "classList",
    "children",
    "classes",
    "color",
  ]);

  var classList = createMemo(() => {
    return {
      "spinner-grow": local.variant === "grow",
      "spinner-border": local.variant === "border",
      "spinner-grow-sm": local.variant === "grow" && local.sm,
      "spinner-border-sm": local.variant === "border" && local.sm,
      [`text-${local.color}`]: local.color !== undefined,
      ...local.classList,
      ...wrapClasses(local.classes),
    };
  });

  return (
    <div class="fire-spinner" classList={classList()} role="status" {...props}>
      <Show
        when={local.children}
        fallback={<span class="visually-hidden">Loading...</span>}
      >
        {local.children}
      </Show>
    </div>
  );
};

export default Spinner;
